<template>
    <el-form-item label="规格选项" v-loading="bodyLoading">
        <el-card shadow="never" class="skus" v-for="(item, index) in sku_card_list" :key="item.id" v-loading="item.loading">
            <template #header>
                <div class="skusHeader">
                    <el-input v-model="item.text" placeholder="规格名称" style="width: 200px" @change="handleUpdate(item)">
                        <template #append>
                            <el-icon class="skusHeaderMore">
                                <more @click="handleChooseSku(item)" />
                            </el-icon>
                        </template>
                    </el-input>
                    <el-button class="skusHeaderBtn" size="small" @click="sortCard('up', index)" :disabled="index == 0">
                        <el-icon>
                            <Top></Top>
                        </el-icon>
                    </el-button>
                    <el-button size="small" @click="sortCard('down', index)" :disabled="index == sku_card_list.length - 1">
                        <el-icon>
                            <Bottom></Bottom>
                        </el-icon>
                    </el-button>
                    <el-button size="small">
                        <el-icon>
                            <Delete></Delete>
                        </el-icon>
                    </el-button>
                    <el-popconfirm title="是否删除该规格选项" confirmButtonText="确认" cancelButtonText="取消"
                        @confirm.stop="handleDelete(item)">
                        <template #reference>
                            <el-button class="noticeActionBtn1" type="primary" size="small" text>删除</el-button>
                        </template>
                    </el-popconfirm>
                </div>
            </template>
            <SkuCardItem :skusCardId="item.id"></SkuCardItem>
        </el-card>
        <el-button size="small" type="success" :loading="btnLoading" @click="addSkusCardEvent">
            添加规格
        </el-button>
    </el-form-item>
    <ChooseSku ref="ChooseSkuRef"></ChooseSku>
</template>
<script setup>
import { ref } from 'vue'
import ChooseSku from '@/pages/components/ChooseSku.vue'
import SkuCardItem from "./SkuCardItem.vue";
import {
    sku_card_list,
    addSkusCardEvent,
    btnLoading,
    handleUpdate,
    handleDelete,
    sortCard,
    bodyLoading,
    handleChooseSetGoodsSkusCard
} from '@/hooks/sku.js'

const ChooseSkuRef = ref(null)

const handleChooseSku = (item) => {
    ChooseSkuRef.value.open((value) => {
        handleChooseSetGoodsSkusCard(item.id, {
            name: value.name,
            value: value.list
        })
    })
}

</script>

<style lang="less">
.el-card__header {
    padding: 10px;
}

.skus {
    width: 100%;
    margin-bottom: 10px;

    .skusHeader {
        display: flex;
        align-items: center;

        .skusHeaderMore {
            cursor: pointer;
        }

        .skusHeaderBtn {
            margin-left: auto;
        }
    }
}
</style>